<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <el-form :model="spaceForm" :rules="spaceRules" ref="spaceForm" @keyup.enter.native="enterFromHandle" label-width="85px">
      <el-form-item label="空间名称" prop="name">
        <el-input v-model="spaceForm.name" placeholder="空间名称"></el-input>
      </el-form-item>
      <el-form-item label="排序等级" prop="sort">
        <el-input v-model.number="spaceForm.sort" maxlength="5" placeholder="排序等级"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle(false)">取消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveSpaceHandle">添加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateSpaceHandle">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "space-save-update",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 空间表单对象
        spaceForm: {
          spaceId: '',
          name: '',
          sort: '',
        },
        // 弹出框标题
        dialogTitle: '添加空间',
        // 空间添加或修改[false-添加 true-修改]
        optType: false,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 用户空间表单校验规则
        spaceRules: {
          name: [
            { required: true, message: '空间名称不能为空', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '排序等级不能为空', trigger: 'blur' },
            { type: 'number', message: '排序等级必须为数字值'}
          ],
        }
      }
    },
    methods: {
      // 初始化空间弹出框事件
      initSpaceDialog(spaceId, optType) {
        this.optType = optType
        this.dialogTitle = optType ? '空间修改' : '添加空间'

        if (optType) {
          this.getSpaceById(spaceId)   // 初始化系统用户信息
        }
      },
      // 根据系统角色id获取角色信息
      getSpaceById(spaceId) {
        this.$axios.$get('/blog/space/info', { params: { spaceId }})
          .then(({ data }) => {
            this.spaceForm.spaceId = spaceId
            this.spaceForm.name = data.name
            this.spaceForm.sort = data.sort
          })
          .catch(() => {})
      },
      // 表单回车事件
      enterFromHandle() {
        if (this.optType) {
          this.updateSpaceHandle()
        } else {
          this.saveSpaceHandle()
        }
      },
      // 添加空间事件
      saveSpaceHandle() {
        this.$refs['spaceForm'].validate((valid) => {
          if (!valid) {
            return
          }

          this.buttonLoad = true    // 按钮不可被点击

          this.$axios.$post('/blog/space/save', this.spaceForm)
            .then(() => {

              this.$notify({
                title: '添加用户成功',
                type: 'success',
                message: `成功添加'${this.spaceForm.name}'用户空间`,
                offset: 100,
                duration: 2000
              });

              this.closeHandle(true)  // 关闭弹出框
            })
            .catch(() => {})
            .finally(() => {
              this.buttonLoad = false      // 按钮恢复可点击
            })
        })
      },
      // 修改空间事件
      updateSpaceHandle() {
        this.$refs['spaceForm'].validate((valid) => {
          if (!valid) {
            return
          }

          this.buttonLoad = true              // 按钮不可被点击

          this.$axios.$post('/blog/space/update', this.spaceForm)
            .then(() => {

              this.$notify({
                title: '空间修改成功',
                type: 'success',
                message: `'${this.spaceForm.name}'用户空间修改成功`,
                offset: 100,
                duration: 2000
              });

              this.closeHandle(true)  // 关闭弹出框

            })
            .catch(() => {})
            .finally(() => {
              this.buttonLoad = false      // 按钮恢复可点击
            })
        })
      },
      // 弹出框关闭处理事件
      closeHandle(bool) {

        this.$refs['spaceForm'].resetFields()         // 清空系统用户表单信息
        this.spaceForm.spaceId = ''                   // 手动清空空间id

        if (typeof bool === 'function') {             // 此处判断触发事件是否是弹出框自带关闭事件
          bool = false
        }
        this.$emit('close-space-dialog', bool)  // 向上传递事件
      },
    }
  }
</script>

<style scoped>

</style>
